<template>
	<view class="evan-form-show">
		<evan-form :hide-required-asterisk="hideRequiredAsterisk" ref="form" :model="info">
			<evan-form-item label="姓名：" prop="name">
				<input  class="form-input" style="margin-left: 55rpx;" placeholder-class="form-input-placeholder" v-model="info.name" placeholder="请输入姓名" />
			</evan-form-item>
			
			<evan-form-item label="性别：" prop="sex">
				<input class="form-input" style="margin-left: 75rpx;display:none;" placeholder-class="form-input-placeholder" v-model="sexs[sindex]"/>
				<view  style="position: absolute;left: 210rpx;color: #000;">
					<picker @change="bindsexChange" :value="sindex" :range="sexs">
						<view class="uni-input">{{sexs[sindex]}}</view>
					</picker>
				</view>
			</evan-form-item>
			
			<evan-form-item label="手机号：" prop="phone" >
				<button v-if="phone==''" class="getphonebtn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-model="info.phone">
					请输入手机号
				</button>
				<input v-else class="getphonebtn" style="color: #000;margin-left: 27rpx;" type="text" disabled="disabled" :value="phone"/>
			</evan-form-item>
			
			<evan-form-item label="考试年份：" prop="data">
				<input class="form-input" style="margin-left: 75rpx;display:none;"  placeholder-class="form-input-placeholder" v-model="array[index]"  />
				<view  style="position: absolute;left: 210rpx;color: #000;">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input">{{array[index]}}</view>
					</picker>
				</view>
				
			</evan-form-item>
			
			<evan-form-item label="就读院校：" prop="sex">
				<input class="form-input" placeholder-class="form-input-placeholder" v-model="info.college" placeholder="请输入就读院校" />
			</evan-form-item>
			<evan-form-item label="所学专业：" prop="sex">
				<input class="form-input" placeholder-class="form-input-placeholder" v-model="info.professional" placeholder="请输入所学专业" />
			</evan-form-item>
			<evan-form-item label="所在班级：" prop="sex">
				<input class="form-input" placeholder-class="form-input-placeholder" v-model="info.class" placeholder="请输入所在班级" />
			</evan-form-item>
			<evan-form-item label="目标专业：" prop="sex">
				<input class="form-input" placeholder-class="form-input-placeholder" v-model="info.targetprofessional" placeholder="请输入目标专业" />
			</evan-form-item>
			<evan-form-item label="目标院校：" prop="sex">
				<input class="form-input" placeholder-class="form-input-placeholder" v-model="info.targetcolleges" placeholder="请输入目标院校" />
			</evan-form-item>
			
			
			
		</evan-form>
		
		
						
						
					
		
		
		
		<view style="width: 95%;display: flex;flex-flow: row nowrap;margin-top: 20rpx;">
			<checkbox-group @tap="boxchecked" style="transform:scale(0.7);margin-top: -4rpx;">
				<label>
					<checkbox    :checked="checked" color="#34baf9" />
				</label>
			</checkbox-group>
			<view style="display: flex;flex-flow: row nowrap;color:#969696;">请勾选阅读并同意
				<text @click="goxieyi()" style="color: #616c8c;">
					用户协议
				</text>
				和
				<text @click="gozhengce()"  style="color: #616c8c;">
					隐私政策
				</text>
		    </view>
		</view>
		
		
		
		
		<button @click="save" style="position: fixed;bottom: 30rpx;background-color:#34baf9;border-radius: 50rpx;" class="evan-form-show__button" >确认</button>	
		
	</view>
</template>

<script>
	
	
	
	
	
	import utils from '@/components/evan-form/utils.js'
	const CONTACT_INFO={
		name:'',
		phone:'',
		duty:''
	}
	export default {
		data() {
			return {
				array: ['2022', '2023', '2024', '2025','2026'],
				sexs:['男','女'],
				index: 0,
				sindex:0,
				xieyi:"gggg东方今典房价肯定复健科解放还款计划撒肥料很骄傲的发挥复活卡浪费哈绝代风华大姐夫和扩大健身房就",
				zhengce:"fdh的说法返回的哈弗看到了发货快递师傅很简答开始发货的时刻就发货的时间的防护等级",
				checked:false,
				hideRequiredAsterisk: false,
				phone:'',
				//date: currentDate,
				// 表单的内容必须初始化
				info: {
					name: '',
					sex: '',
					phone: '',
					data: '',
					colleges: '',
					professional: '',
					class: '',
					targetprofessional: '',
					targetcolleges: '',
				},
				rules: {
					name: {
						required: true,
						message: '请输入姓名'
					},
					sex: {
						required: true,
						
					},
					phone:[{
							required: true,
							message: '请输入手机号'
						},
						{
							pattern:'^1\\d{10}$', // 注意这里由于小程序的缘故正则表达式需要通过string的方式传递并且去除两边的斜杠，中间的斜杠变成两个斜杠
							message:'手机号格式不正确'
						}
					],
					data: {
						required: true,
						message: '请选择日期',
					},	
					
				
					colleges: {
						required: true,
						message: '请输入所在院校'
					},
					professional: {
						required: true,
						message: '请输入所学专业'
					},
					class: {
						required: true,
						message: '请输入所在班级'
					},
					targetprofessional: {
						required: true,
						message: '请输入目标专业'
					},
					targetcolleges: {
						required: true,
						message: '请输入目标院校'
					},
					
					
					
				},
				code:'',

			}
		},
		onLoad(){
			if(uni.getStorageSync('phone')){
				this.phone=uni.getStorageSync('phone')
			}
		},
		mounted() {
			// 这里必须放在mounted中，不然h5，支付宝小程序等会找不到this.$refs.form
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			
			boxchecked(){
				this.checked=!this.checked
			},
			bindPickerChange: function(e) {
			            //console.log('picker发送选择改变，携带值为', e.detail.value)
			            this.index = e.detail.value
			        },
			bindsexChange: function(e) {
			            //console.log('picker发送选择改变，携带值为', e.detail.value)
			            this.sindex = e.detail.value
			        },
			
			
			save() {
				
				var _this=this.info
				if(this.checked!=true){
					alert("请勾选协议")
				}else if(((_this.name==""&&_this.sex=="")&&(_this.phone==""&&_this.colleges==""))&&((_this.professional==""&&_this.class=="")&&(_this.targetprofessional==""&&_this.targetcolleges==""))){
					alert("必填项不能为空")
				}
					// this.$refs.form.validate((res) => {
					// 	if (res) {
					// 		uni.showToast({
					// 			title: '验证通过'
					// 		})
					// 	}
					// })
				
				uni.showToast({
									title: '点击了悬浮按钮',
									icon: 'none'
								})
			},
			getPhoneNumber(e){
				console.log(e.detail)
				this.code=e.detail.code
				this.phoneCode()
				
				//console.log(JSON.stringify(e.target.encryptedData)+"detailusername")
			},
			//获取手机号
			async phoneCode(){
				
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.phoneCode,
					data: {
						code:this.code,
					},
					needLogin: true
				});
				
				if (res.code === 1) {
					this.phone=res.data.phone
					uni.setStorageSync('phone',res.data.phone)
				}
			},
			
			goxieyi(){
				var that=this
				uni.showModal({
					title: '协议',
					content: that.xieyi,
					success: function (res) {
						if (res.confirm) {
							console.log(that.checked+'用户点击确定');
							that.checked=true
						} else if (res.cancel) {
							that.checked=false
							console.log(that.checked+'用户点击取消');
						}
					}
				});
			},
			gozhengce(){
				var that=this
				uni.showModal({
					title: '政策',
					content: that.zhengce,
					success: function (res) {
						if (res.confirm) {
							that.checked=true
							console.log(that.checked+'chenggongzc')
						} else if (res.cancel) {
							that.checked=false
							console.log(that.checked+'shibaizc')
						}
					}
				});
			},
			
		}
	}
</script>

<style lang="scss">
	
	.evan-form-show {
		padding: 0 30rpx;
		background-color: #fff;
		height: 1500rpx;
		font-size: 30rpx;
		.form-input {
			font-size: 28rpx;
			color: #333;
			text-align: left;
			width: 100%;
			box-sizing: border-box;
			height: 60rpx;
			&.textarea{
				height: 240rpx;
				padding: 24rpx 0;
				text-align: left;
			}
		}

		.form-input-placeholder {
			font-size: 28rpx;
			color: #999;
			text-align: left;
		}

		&__button {
			width: 93%;
			height: 88rpx;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0;
			font-size: 36rpx;
			color: #fff;
			margin-top: 20rpx;
			background-color: #2D87D5;

			&::before,
			&::after {
				border: none;
			}
		}
		

		
	}
	.getphonebtn{
		border: none;
		color: darkgrey;
		text-align: left;
		background-color: #ffffff;
		border: none;
		font-size: 30rpx;
		width: 550rpx;
		&::after{
			border: none;
		}
	}
</style>
